﻿@page
@model WhiteBoard.Pages.cwh.IndexModel
@{
}
<link rel="stylesheet" href="~/lib/jqueryui/jquery-ui.min.css" />
<link rel="Stylesheet" type="text/css" href="~/lib/WPaint/wPaint.min.css" />

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jqueryui/jquery-ui.min.js"></script>
<script type="text/javascript" src="~/lib/WPaint/wPaint.min.js"></script>
<script type="text/javascript" src="~/lib/WPaint/plugins/main/wPaint.menu.main.min.js"></script>
<script type="text/javascript" src="~/lib/WPaint/plugins/text/wPaint.menu.text.min.js"></script>
<script type="text/javascript" src="~/lib/WPaint/plugins/shapes/wPaint.menu.main.shapes.min.js"></script>
<script type="text/javascript" src="~/lib/WPaint/plugins/file/wPaint.menu.main.file.min.js"></script>

<script type="text/javascript">
    var dropBox;
    var ctx;
    var oC;
    var oCG;
    window.onload = function () {
        oC = document.getElementById("w1");
        oCG = oC.getContext('2d');
        oC.onmousedown = function (ev) {
            ev = ev || window.event;
            oCG.moveTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
            document.onmousemove = function (ev) {
                var ev = ev || window.event;
                oCG.lineTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
                oCG.stroke();
            };
            oC.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };

        dropBox = document.getElementById("dropBox");
        ctx = dropBox.getContext("2d");
        dropBox.ondragenter = ignoreDrag;
        dropBox.ondragover = ignoreDrag;
        dropBox.ondrop = drop;
    }

    function ignoreDrag(e) {
        e.stopPropagation();
        e.preventDefault();
    }

    function drop(e) {
        e.stopPropagation();
        e.preventDefault();
        var data = e.dataTransfer;
        var files = data.files;
        processFiles(files);
    }

    function processFiles(files) {
        var file = files[0];
        var reader = new FileReader();
        var img = document.getElementById("img");
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            img.src = e.target.result;
            setTimeout(() => {
                ctx.drawImage(img, 0, 0, 400, 400);
            }, 0);
        };
    }
</script>



<div style="border: solid">
    <h4>001_鼠标绘图简易实现</h4>
    <canvas id="w1" width="1200" height="500"></canvas>
</div>

<div style="border: solid">
    <img id="img" src="~/img/1.jpg" style="display:none"/>
    <h4>002_拖入图片实现</h4>
    <canvas id="dropBox" width="1200" height="500"></canvas>
</div>

<div style="border: solid; height:500px">
    <h4>003_拖动图片实现</h4>
    <img id="img2" src="~/img/1.jpg" style="width:200px" />
</div>

<script>
    $("#img2").draggable();
</script>